<!DOCTYPE html>
<html>
    <head>
        <title>My Sample Project</title>
        <!-- data-main attribute tells require.js to load
             scripts/main.js after require.js loads. -->
				 <!-- <script data-main="scripts/main" src="scripts/require.js"></script> -->
		  <script type="text/javascript">

var Page = function() {
	var me = this;

	me.data = {
		text: "This is the text to display"
	}
};

Page.prototype = {
	addText: function(txt) {
		var me = this;
		me.data.text = txt;
		console.log("page.add");
	},
	removeText: function() {
		var me = this;
		me.data.text = "";
		console.log("page.remove");
	}
};

var OTDocument = function() {
	var me = this;

	me.data = {
		pgs: [],
		cnt: 0
	}
};

OTDocument.prototype = {
	addPage: function(p) {
		var me = this;
		me.data.pgs[me.data.cnt] = p;
		me.data.cnt++;
		console.log("document.add");
	},
	removePage: function() {
		var me = this;
		me.data.cnt--;
		console.log("document.remove");
	}
};

var Viewer = function(opts) {
	var me = this;

	me.data = {
		cfg: {
			"frame":"Viewer",
		},
		doc: null
	};
	console.log("Viewer constructor");
};

Viewer.prototype = {
	show: function() {
		var me = this;
		console.log("viewer.show()");
	},

	init: function() {
		var me = this;
		console.log("viewer.init()");
		me.data.doc = new OTDocument();
	},

	addPage: function(t) {
		var me = this;
		var p = new Page();
		p.addText(t);
		me.data.doc.addPage(p);
		console.log("Viewer.add()");
	}
};

function run() {
	debugger;
	var VV = new Viewer();
}
</script>
    </head>
    <body onload="run()">
        <h1>My Sample Project</h1>
    </body>
</html>
